<script setup>
import { useLayout } from '@/layout/composables/layout'
import { ref, computed } from 'vue'
import AppConfig from '@/layout/AppConfig.vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { setAccount, setToken } from '../../router/index.js'
import {md5} from "js-md5";


const router = useRouter()

const { layoutConfig } = useLayout()
const account = ref('')
const password = ref('')
const checked = ref(false)

const logoUrl = computed(() => {
  return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.png`
})

const toRegister = () => {
  router.push('/auth/register')
}

const login = async () => {
  try {
    const response = await axios.post(
      'http://localhost:8080/user/login',
      {
        account: account.value,
        password: md5(password.value)
      },
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    )
    if (response.status === 200) {
      let tokenData = response.data
      setToken(tokenData)
      setAccount(account.value)
      console.log(tokenData)
      console.log('登录请求成功')
      if(checked.value){
        router.push('/')
      }else{
        yanzheng.value = true
      }
    } else if (response.status === 407) {
      alert('用户名不存在')
    } else {
      alert('用户名或密码错误')
    }
  } catch (error) {
    console.error(error)
  }
}

let deletePathDialog = ref(false)
let yanzheng = ref(false)
const xieyi = () => {
  deletePathDialog.value = true
}

const accept = () => {
  checked.value = true
  deletePathDialog.value = false
}

const refuse = () => {
  checked.value = false
  deletePathDialog.value = false
}
const refuse1 = () => {
  yanzheng.value = false
}
const read = () =>{
  xieyi()
  yanzheng.value = false
}
</script>

<template>
  <div class="container" style="display: flex; position: absolute; flex-direction: row">
    <img :src="logoUrl" alt="Sakai logo" class="icon" />
    <strong style="height: 100%" class="flex">城の林荫</strong>
  </div>
  <div
    class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"
  >
    <div class="flex flex-column align-items-center justify-content-center">
      <div
        style="
          border-radius: 56px;
          padding: 0.3rem;
          background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);
        ">
        <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
          <div class="text-center mb-5">
            <img
              src="../../../public/demo/images/login/amyelsner.png"
              alt="Image"
              height="50"
              class="mb-3"
            />
          </div>

          <div>
            <label for="email1" class="block text-900 text-xl font-medium mb-2">账号</label>
            <InputText id="email1" type="text" placeholder="请输入账号" class="w-full md:w-30rem mb-5" style="padding: 1rem"
              v-model="account" />

            <label for="password1" class="block text-900 font-medium text-xl mb-2">密码</label>
            <Password
              id="password1"
              v-model="password"
              placeholder="请输入密码"
              :toggleMask="true"
              class="w-full mb-3"
              inputClass="w-full"
              :inputStyle="{ padding: '1rem' }"
              :feedback="false"
            ></Password>

            <div class="flex align-items-center justify-content-between mb-5 gap-5">
              <div class="flex align-items-center" style="margin-top: 10px">
                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
                <label for="rememberme1">我已经阅读并同意</label
                ><Button
                  label="《用户协议》"
                  link
                  style="margin: 0px; padding: 0px"
                  @click="xieyi"
                />
              </div>
              <a class="kk font-medium no-underline ml-2 text-right cursor-pointer"
                style="color: var(--primary-color)">忘记密码?</a>
            </div>

            <div class="flex-container" style="width: 100%; margin-top: 10px">
              <div class="item1">
                <Button @click="login" label="登录" style="width: 100%" class="p-3 text-xl"></Button>
              </div>

              <div class="item2">
                <Button @click="toRegister()" label="注册" style="width: 100%" class="p-3 text-xl"></Button>
              </div>
              <Dialog
                v-model:visible="deletePathDialog"
                :style="{ width: '600px' }"
                header="《用户协议》"
                :modal="true"
              >
                <div class="confirmation-content">
                  <div >
                    <p>前言：介绍协议的目的和适用范围。</p>
                    <p>定义：对协议中使用的专业术语或特定词汇进行定义。</p>
                    <p>账户注册：说明用户如何注册账户，以及注册过程中需要遵守的规则。</p>
                    <p>使用条款：详细说明用户在使用服务或产品时必须遵守的行为准则。</p>
                    <p>隐私政策：概述用户数据的收集、使用、保护和共享政策。</p>
                    <p>知识产权：声明服务或产品的知识产权归属，并规定用户对这些知识产权的使用限制。</p>
                    <p>服务变更和终止：说明服务提供商在何种情况下可以修改或终止服务。</p>
                    <p>费用和支付：如果服务或产品需要付费，将详细说明费用结构、支付方式和退款政策。</p>
                    <p>用户行为：规定用户在平台上的行为准则，包括禁止的行为，如发布非法内容、侵犯他人权利等。</p>
                    <p>免责声明：服务提供商对某些情况下可能发生的损失或损害免除责任。</p>
                    <p>责任限制：限制服务提供商在用户使用服务过程中可能承担的责任。</p>
                    <p>争议解决：说明如何解决用户与服务提供商之间的争议，包括适用法律和争议解决机制。</p>
                    <p>其他条款：可能包括协议的修改、通知方式、协议的完整协议性等。</p>
                    <p>接受协议：通常在用户注册或使用服务前，需要用户明确表示接受协议的条款。</p>
                  </div>
                </div>
                <template #footer>
                  <Button label="拒绝" icon="pi pi-times" text @click="refuse" />
                  <Button label="同意" icon="pi pi-check" text @click="accept" />
                </template>
              </Dialog>
              <Dialog
                v-model:visible="yanzheng"
                :style="{ width: '450px' }"
                header="请先阅读并同意《用户协议》"
                :modal="true"
              >
              <template #footer>
                  <Button label="拒绝" icon="pi pi-times" text @click="refuse1" />
                  <Button label="阅读" icon="pi pi-check" text @click="read" />
                </template>
              </Dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <AppConfig simple />
</template>

<style scoped>
.flex-container {
  display: -webkit-flex;
  display: flex;
}

.item1 {
  -webkit-flex: 1;
  flex: 1;
  margin-right: 5px;
}

.item2 {
  -webkit-flex: 1;
  flex: 1;
  margin-left: 5px;
}

strong {
  font-size: 40px;
  margin: auto auto;
}
</style>
